<template>
  <div
    class="float-container"
    :class="{ 'open': isSearchBox, 'prevent-overflow': preventOverflow }"
  >
    <span
      class="search-buttom pointer"
      :class="[enter, clicked, success]"
      @mouseenter="enter = ''"
      @mouseleave="enter = offsetDirection"
      @click="handleSearchBoxShow($event)"
    >
      <i
        class="el-icon-search"
        style="width: 100%; height: 100%; font-size: 40px"
      />
    </span>

    <div v-show="isSearchBox" class="search-box card">
      <i class="el-icon-close pointer close" @click="closeSearchBox" />
      <!-- <el-button type="" @click="closeSearchBox">关闭</el-button> -->
      <slot>
        <h3>自定义搜索</h3>
        <el-form inline>
          <el-form-item label="性别">
            <el-input placeholder="" />
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    offsetDirection: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      enter: this.offsetDirection,
      isSearchBox: false,
      isSearchButton: true,
      isShowRipple: false,
      clicked: '',
      success: '',
      animating: false,
      preventOverflow: false
    }
  },
  methods: {
    ripple(elem, e) {
      $('.ripple').remove()
      var elTop = elem.offset().top
      var elLeft = elem.offset().left
      var x = e.pageX - elLeft
      var y = e.pageY - elTop
      var $ripple = $("<div class='ripple'></div>")
      $ripple.css({ top: y, left: x })
      elem.append($ripple)
    },
    moveButtom(target) {
      var $button = $('.search-buttom')
      var targetWidth = target.width()
      var targetHeight = target.height()
      var buttonWidth = $button.width()
      var buttonHeight = $button.height()
      var x = targetWidth / 2 - buttonWidth / 2
      var y = targetHeight / 2 - buttonHeight / 2
      $button.css({ top: y, right: x })
    },
    recoverButtom() {
      var $button = $('.search-buttom')
      $button.css({ top: 0, right: 0 })
    },
    handleSearchBoxShow(e) {
      if (this.animating) return
      this.animating = true
      this.ripple($('.search-buttom'), e)
      this.moveButtom($('.search-box'))
      setTimeout(() => {
        this.preventOverflow = true
      }, 200)
      setTimeout(() => {
        this.success = 'success'
        this.isSearchBox = true
      }, 400)
      setTimeout(() => {
        $('.search-buttom').css('visibility', 'hidden')
        this.preventOverflow = false
        this.animating = false
      }, 600)
    },
    closeSearchBox() {
      if (this.animating) return
      this.animating = true
      this.preventOverflow = true
      this.success = ''
      setTimeout(() => {
        this.isSearchBox = false
        $('.search-buttom').css('visibility', 'visible')
      }, 200)
      setTimeout(() => {
        this.preventOverflow = false
        this.recoverButtom()
        this.animating = false
      }, 500)
    }
  }
}
</script>
<style lang="scss">
.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: rgba(0, 0, 0, 0.4);
  transform: scale(0);
  animation: animRipple 0.4s;
  border-radius: 50%;
}
@keyframes animRipple {
  to {
    transform: scale(3.5);
    opacity: 1;
  }
}
</style>
<style lang="scss" scoped>
.float-container {
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  bottom: 100px;
  &.prevent-overflow {
    overflow: hidden;
  }
  &.open{
    z-index: 99;
  }
}
.search-buttom {
  position: absolute;
  z-index: 99;
  overflow: hidden;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: scale(1);
  box-shadow: 0px 0px 8px rgb(102,177,255);
  background: #fff;
  opacity: 1;
  transition: top 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s,
    opacity 0.1s 0.7s, background-color 0.1s 0.7s, width 0.3s 0.15s,
    font-size 0.1s 0.15s, transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s,
    background-color 0.1s 0.3s;
  &.clicked {
    bottom: 50%;
    right: 50%;
  }
  &.left {
    transform: translate(20px, 0);
  }
  &.right{
    transform: translate(-20px, 0);
  }
  &.success {
    transform: scale(30);
    opacity: 0.9;
  }
}
.search-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 8px rgb(102,177,255);
  overflow: hidden;
  z-index: -1;
  padding: 10px;
  .close{
    float: right;
  }
}
</style>
